<%--
  Created by IntelliJ IDEA.
  User: 王一同
  Date: 2021/11/20
  Time: 12:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>部门管理</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/component/pear/css/pear.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/other/department.css"/>
</head>
<body class="pear-container">
<form class="layui-form" lay-filter="userForm" id="userForm" action="" style="display: none">
	<div class="mainBox">
		<div class="main-container">
			<div class="main-container">
				<input type="hidden" name="id">
				<div class="layui-form-item">
					<label class="layui-form-label">部门id</label>
					<div class="layui-input-block">
						<input type="text" name="departmentId" id="departmentId" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">部门名称</label>
					<div class="layui-input-block">
						<input type="text"  name="departmentName" id="departmentName" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">部门状态</label>
					<div class="layui-input-block">
						<input type="radio" name="dstatus" id="dstatus" value="1" title="启用">
						<input type="radio" name="dstatus"  value="0" title="停用" >
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">部门描述</label>
					<div class="layui-input-block">
						<input type="text"  name="departmentDisc" id="departmentDisc" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="button-container">
			<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
				<i class="layui-icon layui-icon-ok"></i>
				提交
			</button>
			<button type="reset" class="pear-btn pear-btn-sm">
				<i class="layui-icon layui-icon-refresh"></i>
				重置
			</button>
		</div>
	</div>
</form>

<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">部门id</label>
					<div class="layui-input-inline">
						<input type="text" name="departmentId" id="sdepartmentId" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">部门名称</label>
					<div class="layui-input-inline">
						<input type="text" name="departmentName" id="sdepartmentName" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">部门描述</label>
					<div class="layui-input-inline">
						<input type="text" name="departmentDisc" id="sdepartmentDisc" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<a id="search"  class="pear-btn pear-btn-md pear-btn-primary"  lay-filter="user-query">
						<i class="layui-icon layui-icon-search"></i>
						查询
					</a>
					<button type="reset" class="pear-btn pear-btn-md">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="layui-row layui-col-space15">
<%--	<div class="layui-col-md3">--%>
<%--		<div class="layui-card">--%>
<%--			<div class="layui-card-body">--%>
<%--				<div id="organizationTreeContent" style="overflow: auto">--%>
<%--					<ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>--%>
<%--				</div>--%>
<%--			</div>--%>
<%--		</div>--%>
<%--	</div>--%>
	<div class="layui-col-md9">
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="organization-table" lay-filter="organization-table"></table>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="organization-toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
	<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		<i class="layui-icon layui-icon-delete"></i>
		删除
	</button>
</script>

<script type="text/html" id="organization-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
			class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
			class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="app">
	{{#  if(d.dstatus == 1){ }}
		<span class="layui-btn layui-btn-normal" >启用中</span>
	{{#  } else { }}
		<span class="layui-btn layui-btn-danger" >已禁用</span>
	{{#  } }}
</script>
<script src="${pageContext.request.contextPath}/component/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/component/pear/pear.js"></script>
<script>
	layui.use(['table', 'form', 'jquery'], function() {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		// let dtree = layui.dtree;

		let MODULE_PATH = "operate/";

		//获取对应表格
		let cols = [
			[{
				type: 'checkbox'
			},
				{
					title: '部门编号',
					field: 'departmentId',
					align: 'center'
				},
				{
					title: '部门名称',
					field: 'departmentName',
					align: 'center'
				},
				{
					title: '状态',
					field: 'dstatus',
					align: 'center',
					templet:"#app"
				},
				{
					title: '部门描述',
					field: 'departmentDisc',
					align: 'center'
				},
				{
					title: '操作',
					toolbar: '#organization-bar',
					align: 'center',
					width: 130
				}
			]
		]


		<%--var DTree = dtree.render({--%>
		<%--	elem: "#organizationTree",--%>
		<%--	//data: data,--%>
		<%--	initLevel: "2", //默认展开层级为1--%>
		<%--	line: true, // 有线树--%>
		<%--	ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标--%>
		<%--	icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标--%>
		<%--	method: 'get',--%>
		<%--	url: "../../admin/data/organizationtree.json"--%>
		<%--	&lt;%&ndash;url:"${pageContext.request.contextPath}/ShowDepartment"&ndash;%&gt;--%>
		<%--});--%>

		//表格数据的渲染
			table.render({
				id:"organization-table",
				elem: '#organization-table',
				// url: '../../admin/data/organization.json',
				url:"${pageContext.request.contextPath}/ShowDepartment",
				// height: 'full-150',
				page: true,
				cols: cols,
				skin: 'line',
				toolbar: '#organization-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports']
			});




		table.on('tool(organization-table)', function(obj) {
			if (obj.event === 'remove') {
				window.remove(obj);
			} else if (obj.event === 'edit') {
				window.edit(obj);
			}
		});

		table.on('toolbar(organization-table)', function(obj) {
			if (obj.event === 'add') {
				window.add();
			} else if (obj.event === 'refresh') {
				window.refresh();
			} else if (obj.event === 'batchRemove') {
				window.batchRemove(obj);
			}
		});

		form.on('submit(organization-query)', function(data) {
			table.reload('organization-table', {
				where: data.field
			})
			return false;
		});

		window.add = function() {
			layer.open({
				type: 2,
				title: '新增',
				shade: 0.1,
				area: ['500px', '400px'],
				content: '${pageContext.request.contextPath}/views/dept/add.jsp'
			});
			window.refresh();
		}

		window.edit = function(obj) {
			$('#userForm')[0].reset();
			$('#userId').val("");
			layer.open({
				type:1,
				area:['390px','350px'],
				offset: '100px',
				content:$("#userForm")
			})
			//为表单赋值
			form.val('userForm',obj.data);


		}
		//监听修改表单提交
		form.on('submit(user-save)', function(obj){
			console.log(obj)
			let roleIds = "";
			$('input[type=checkbox]:checked').each(function() {
				roleIds += $(this).val()+",";
			});
			roleIds = roleIds.substr(0,roleIds.length-1);
			obj.field.roleIds = roleIds;
			$.ajax({
				url:'${pageContext.request.contextPath}/updateDepartment',
				data:obj.field,
				dataType:'json',
				type:'post',
				success:function(result){
					if(result.code==200){
						layer.msg(result.msg,{icon:1,time:1000},function(){
							layer.closeAll()
							parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
							parent.layui.table.reload("user-table");
							table.reload('user-table')
							window.refresh();
						});
					}else{
						layer.msg(result.msg,{icon:2,time:1000});
					}
				}
			})
			return false;
		});


		//模糊查询提交
		$("#search").click(function(){
			  table.reload("organization-table",{
			  	  page:{
			  	  	 curr:1
				  },
				  where:{
					  departmentId:$("#sdepartmentId").val(),
					  departmentName:$("#sdepartmentName").val(),
					  departmentDisc:$("#sdepartmentDisc").val(),
				  }

			  })
		})

		window.remove = function(obj) {
			var data = obj.data;
			layer.confirm('确定要删除该用户', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: "${pageContext.request.contextPath}/deleteDepartment?departmentId=" + obj.data['departmentId'],
					<%--url:"${pageContext.request.contextPath}/deleteDepartment",--%>
					dataType: 'json',
					type: 'delete',
					success: function(result) {
						layer.close(loading);
						if (result.code==200) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000,

							}, function() {
								obj.del();
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
						window.refresh();
					}
				})
			});
		}


		// 多选删除
		window.batchRemove = function(obj) {
			let data = table.checkStatus(obj.config.id).data;
			if (data.length === 0) {
				layer.msg("未选中数据", {
					icon: 3,
					time: 1000
				});
				return false;
			}
			// let ids = "";
			let arrayid = new Array();
			for (let i = 0; i < data.length; i++) {
				// ids += data[i].departmentId + ",";
				arrayid[i]=data[i].departmentId;
			}
			//ids = ids.substr(0, ids.length - 1);
			console.log(arrayid);
			layer.confirm('确定要删除这些用户', {
				icon: 3,
				title: '提示'
			}, function(index) {
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: "${pageContext.request.contextPath}/pldeleteDepartment",
					dataType: 'json',
					data:"arrayid="+arrayid,
					type: 'post',
					success: function(result) {
						layer.close(loading);
						if (result.code==200) {
							layer.msg(result.msg, {
								icon: 1,
								time: 1000
							}, function() {
								table.reload('organization-table');
								window.refresh();
							});
						} else {
							layer.msg(result.msg, {
								icon: 2,
								time: 1000
							});
						}
					}
				})
			});
		}

		window.refresh = function(param) {
			table.reload('organization-table');
		}
	})
</script>
</body>
</html>
